<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html >
<head>
	<meta name="decorator" content="sysDefault" content="text/html; charset=utf-8"/>
	<!-- 
	<style type="text/css">
	div.diagram{
		margin: 20px;
		position: relative;
		background: url('${contextPath}/bpm/def/definition/bpmImage?bpmnDefId=${bpmDefUtil.bpmDefinition.bpmnDefId }') no-repeat;
		width: 1000px;
		height:1000px;
	}
	</style> -->
	<script type="text/javascript">
		var _defId = "${bpmDefUtil.bpmDefinition.defId }";
		$(document).ready(function() {
			var _form = $("#definitionForm"),
				_key_reg = /^[a-zA-Z][a-zA-Z0-9isDeploy_]*$/;
			//注册事件 begin
			
			$("#btn_save").click(function(){//保存按钮
				var _defId = $("#defId").val(),_submitType = $("#submitType");
				if(!_submitType.size()){
					_submitType = $("<input type='hidden' id='submitType'>").appendTo(_form);
				}
				_submitType.attr("name","isSave").val(_defId.length ? "true" : "false");
				_form.submit();
			});
			
			$("#btn_deploy").click(function(){//部署按钮
				var _submitType = $("#submitType");
				if(!_submitType.size()){
					_submitType = $("<input type='hidden' id='submitType'>").appendTo(_form);
				}
				_submitType.attr("name","isDeploy").val("true");
				_form.submit();
			});
			
			$("div .flowNode").dblclick(function(){//流程节点双击事件
				window.showModalDialog("${contextPath}"+"/bpm/def/node/showNodeDef?proDefId="+_defId+"&nodeDefId="+this.id,null,"dialogWidth=1300px;dialogHeight=700px");
			});
			
			function ckMult(tr,key){//检查Key是否存在
				var _exist = false;
				tr.siblings().each(function(){
					if($(this).find("input[name='vars."+key+"']").size()){
						_exist = true;
						return false;
					}
				});
				return _exist;
			}
			
			function clone(_tr){//复制行
				var _next = _tr.clone(),
					_tds = _next.find("td");
				_tr.after(_next);
				_tds.eq(0).find("input").val("").focus();
				_tds.eq(1).find("input").val("").removeAttr("name");
				binding(_next[0]);
			}
			
			function binding(domTr){//流程变量操作事件绑定函数
				var _tr = $(domTr),
					_tds = _tr.find("td"),
					_key = _tds.eq(0).find("input"),
					_val = _tds.eq(1).find("input"),
					_del = _tds.eq(2).find("input.del"), 
					_add = _tds.eq(2).find("input.add"), 
					_name_pre = "vars.",
					_checked = false;
			
				_key.keyup(function(e){
					if(e.keyCode == 13){
						if(this.value.length){
							if(!_key_reg.test(this.value)){
								alert("\n\t流程变量只能包含字母、数字、下划线且必须以字母开始")
								return false;
							}
							if(ckMult(_tr,this.value)){
								alert("\n\t"+this.value+"已经存在")
								return false;
							}
							_val.attr("name",_name_pre+_key.val());
							_val.focus();
						}
					}
				}).blur(function(){
					if(this.value.length){
						if(!_key_reg.test(this.value)){
							alert("\n\t流程变量只能包含字母、数字、下划线且必须以字母开始")
							return false;
						}
						if(ckMult(_tr,this.value)){
							alert("\n\t"+this.value+"已经存在")
							return false;
						}
						var _name = _name_pre+this.value;
						if(_val.attr("name") != _name){
							_val.attr("name",_name);
						}
					}
				});
				
				_val.keyup(function(e){
					if(e.keyCode == 13){
						if(this.value.length){
							if(!this.name.length){
								if(_key.val().length){
									if(!_key_reg.test(this.value)){
										alert("\n\t流程变量只能包含字母、数字、下划线且必须以字母开始")
										return false;
									}
									this.name = _name_pre+_key.val();
								}else{
									if(confirm("\n\t请输入变量名称")){
										_checked = true;
										_key.focus();
									}else{
										return false;
									}
								}
							}else{
								var _next = _tr.next();
								if(_next.size()){
									_next.find("td:first-child").find("input").focus();
								}else{
									clone(_tr);
								}
							}
						}
					}
				}).blur(function(){
					if(!this.name.length && !_checked||(_checked=false)){
						if(confirm("\n\t请输入变量名称")){
							_key.focus();
						}
					}
				});
				
				_del.click(function(){
					var self = $(this),tr = self.closest("tr");
					if(self.closest("tbody").find("tr").size() == 1){
						tr.find("input:text").val("").removeAttr("name");
					}else{
						tr.remove();
					}
				});
				_add.click(function(){
					clone($(this).closest("tr"));
				});
			}
			
			$("#varsBody tr").each(function(){//流程变量操作事件
				binding(this);
			});
			
			//注册事件 end
		});
		
	</script>
	<title>${bpmDefUtil.bpmDefinition.bpmnDefId == null ? '新增' : '修改' }流程定义</title>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<div class="panel panel-default">
				  <div class="panel-heading">
					 <h3 class="panel-title">流程定义
<!-- 						<a id="btn_save" class="btn btn-primary btn-sm pull-right" role="button" href="#" -->
<!-- 							onclick="btn_click_start();">保存</a> -->
						<!--  a id="btn_deploy" class="btn btn-primary pull-right" role="button" href="#"
							onclick="btn_click_start();">发布</a>-->
						<button class="btn btn-default btn-sm pull-right" role="button" onclick="history.go(-1);">返回</button>
						<button id="btn_save" class="btn btn-primary btn-sm pull-right" role="button" style="margin-right: 5px;">保存</button>
					 </h3>
				  </div>
				  <div class="panel-body">
					<form:form id="definitionForm" modelAttribute="bpmDefUtil" action="${contextPath}/bpm/def/definition/save" method="post" class="form-horizontal" role="form">
				  		<form:hidden path="bpmDefinition.defId" id="defId"/>
							<ul class="nav nav-tabs" id="myTab">
								<li class="active"><a href="#home" data-toggle="tab">流程定义</a></li>
								<li><a href="#vars" data-toggle="tab">流程变量</a></li>
								<li><a href="#diagram" data-toggle="tab">流程图</a></li>
							</ul>
							<div class="tab-content" style="height: 60%; width: 100%">
								<div class="tab-pane active" id="home">
								
								<table class="table table-bordered">
									<thead style="background-color: #e7e7e7">
										<tr><td align="center" colspan="2" ><font size="4" style="font-weight: 3">流程实例设置</font> </td></tr>
									</thead>
									<tr>
										<td>
											<label for="name" class="col-sm-4 control-label">流程名称:</label>
											<div class="col-sm-6" >
												<form:input id="bpmDefinition.name" path="bpmDefinition.name" maxlength="20" class="form-control required"/>
											</div>
										</td>
										<td>
											<label for="defKey" class="col-sm-4 control-label">流程业务主键:</label>
											<div class="col-sm-6">
												<form:input id="bpmDefinition.defKey" path="bpmDefinition.defKey" maxlength="20" class="form-control required"/>
											</div>
										</td>
									</tr>
									<tr>
										<td colspan="2">
											<label for="testStatus" class="col-sm-2 control-label">测试状态:</label>
											<div class="col-sm-2">
												<ossp:radio dictType="BPM_DEF_TEST_STATUS" name="bpmDefinition.testStatus" value="${bpmDefUtil.bpmDefinition.testStatus}" defaultChecked="test"></ossp:radio>
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<label for="desc" class="col-sm-4 control-label">流程描述:</label>
											<div class="col-sm-6">
												<form:textarea id="bpmDefinition.desc" path="bpmDefinition.desc" class="form-control" rows="3"  maxlength="255"/>
											</div>
										</td>
										<td>
											<label for="reason" class="col-sm-4 control-label">变更理由:</label>
											<div class="col-sm-6">
												<form:textarea id="bpmDefinition.reason" path="bpmDefinition.reason" class="form-control" rows="3"  maxlength="255"/>
											</div>
										</td>
									</tr>
								
								</table>
								<table class="table table-bordered">
									<thead style="background-color: #e7e7e7">
										<tr><td align="center" colspan="2" ><font size="4" style="font-weight: 3">流程基本设置 </font></td></tr>
									</thead>
									<tr>
										<td>
											<label for="reason" class="col-sm-4 control-label">相邻节点相同执行人跳过:</label>
											<div class="col-sm-8">
												<form:radiobutton id="extProperties.skipSameUser" label="是" path="extProperties.skipSameUser" value="true"/>
												<form:radiobutton id="extProperties.skipSameUser" label="否" path="extProperties.skipSameUser" value="false"/>
											</div>
										</td>
										<td>
											<label for="reason" class="col-sm-4 control-label">当任务执行人为空时跳过:</label>
											<div class="col-sm-8">
												<form:radiobutton id="extProperties.skipExecutorEmpty" label="是" path="extProperties.skipExecutorEmpty" value="true"/>
												<form:radiobutton id="extProperties.skipExecutorEmpty" label="否" path="extProperties.skipExecutorEmpty" value="false"/>
											</div>
										</td>
									</tr>
									<tr>
										<td>
											<label for="reason" class="col-sm-4 control-label">允许执行人为空:</label>
											<div class="col-sm-8">
												<form:radiobutton id="extProperties.allowExecutorEmpty" label="是" path="extProperties.allowExecutorEmpty" value="true"/>
												<form:radiobutton id="extProperties.allowExecutorEmpty" label="否" path="extProperties.allowExecutorEmpty" value="false"/>
											</div>
										</td>
										<td>
										</td>
									</tr>
								</table>
								</div>
								<div class="tab-pane" id="vars">
									<span class="help-block">&nbsp;</span>
									<div class="container-fluid">
										<div class="col-sm-12">  
											<div> 
												<table class="table table-bordered">
													<thead>
														<tr>
															<th>键(Key)</th>
															<th>值(Value)</th>
															<th>操作</th>
														</tr>
													</thead>
													<tbody id="varsBody">
														<c:if test="${vars==null }">
															<tr>
																<td>
																	<div style="width:100%;" class="col-sm-2">
																		<input maxlength="20" class="form-control" placeholder="请输入变量名称">
																	</div>
																</td>
																<td>
																	<div style="width:100%;" class="col-sm-2">
																		<input maxlength="255" class="form-control" placeholder="请输入变量值">
																	</div>
																</td>
																<td>
																	<input class="btn btn-primary add" type="button" value="添加"/>
																	<input class="btn btn-primary del" type="button" value="删除"/>
																</td>
															</tr>
														</c:if>
														<c:if test="${vars!=null }">
															<c:forEach items="${vars}" var="entry">
																<tr>
																	<td>
																		<div style="width:100%;" class="col-sm-2">
																			<input value="${entry.key }" maxlength="20" class="form-control" placeholder="请输入变量名称">
																		</div>
																	</td>
																	<td>
																		<div style="width:100%;" class="col-sm-2">
																			<input value="${entry.value }" name="vars.${entry.key }" maxlength="255" class="form-control" placeholder="请输入变量值">
																		</div>
																	</td>
																	<td>
																		<input class="btn btn-primary add" type="button" value="添加"/>
																		<input class="btn btn-primary del" type="button" value="删除"/>
																	</td>
																</tr>
															</c:forEach>
														</c:if>
													</tbody>
												</table>
											</div>
										</div> 
									</div>
								</div>
								<div class="tab-pane" id="diagram" style="overflow-x:auto;">
									<div style="margin-top:20px;position:relative;background:url('${contextPath}/bpm/def/definition/bpmImage?defId=${bpmDefUtil.bpmDefinition.defId}') no-repeat;width:${bpmDefLayout.width}px;height:${bpmDefLayout.height}px;">
										<c:forEach var="layout" items="${bpmDefLayout.listLayout}">
											<div class="flowNode" id="${layout.nodeId}" style="position:absolute;left:${layout.x}px;top:${layout.y}px;width:${layout.width}px;height:${layout.height}px;" name="${layout.name}" nodetype="${layout.nodeType}"></div>
										</c:forEach> 
									</div>
								</div>
							</div>
					 </form:form>
				  </div>
				  <div class="panel-footer">
				 	
				  </div>
				</div>			
			</div>
		</div>
	</div>
</body>
</html>